<template>
  <div class="home">
    <div v-if="posts.length" class="layout">
      <PostList :posts="posts" />
    </div>
    <div v-else><Spinner/></div>
  </div>
</template>

<script setup>

import PostList from "../components/Postlists.vue";
import getPosts from "../composibles/getPosts"
import Spinner from "../components/Spinner.vue"
const { posts }  = getPosts();

/** import useMainStore from '../store/index.js'
 *  const store = useMainStore() 
 *  let { count } = store 此解构会失去响应式
 *  count-- 直接修改? 
*/
/** 是用pinia里带的 storeToRefs 恢复响应式 
 *  import { storeToRefs } from 'pinia'
 *  let { count } = storeToRefs(store)
*/
/** $patch 对象修改
 *  store.$patch({
 *      count: store.count + 5
 *  })
 */
/** $patch 函数式修改
 *  store.$patch((state)=>{
 *  state.list.push({name:"xxx",price:"xxx"});
 *  state.count += 10 ;
 *  })
 */
/** 将整个store 的 state 替换掉
 *  store.$state = {
 *   ...替换内容 
 *  }
 */
/** 将整个store state 重置  
 *  function resetState () {
 *    store.$reset();
 *  }
*/
/** 监听整个仓库的变化
 *  store.$subscribe((mutation,state)=>{
 *    console.log(mutation); 查看变化信息对象
 *    console.log(state);
 *  })
 * 
 */
console.log( store.count);
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
.layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}
</style>
